import React, { useEffect, useState } from 'react';
import { Stage, Layer, Rect, Image, Text, Line } from 'react-konva';
import Konva from 'konva';
import { Button, Col, DatePicker, Form, Input, Row } from 'antd';
import moment from 'moment';
import Calendar1 from './Calendar1';
import Calendar2 from './Calendar2';

import { prominent } from 'color.js'
import Calendar3 from './Calendar3';



const App = () => {
  let [form] = Form.useForm()
  const [date, setDate] = useState(moment())
  const [color, setColor] = useState<any>('#a3ab82')
  const [img, setImg] = useState(null);
  const [text, setText] = useState('');
  useEffect(() => {
    const img = new window.Image();
    img.src = 'http://127.0.0.1:3000/api/fileProxy?url=https://img2.woyaogexing.com/2022/07/05/ffa480c830bf418a!360x640.jpg'
    img.onload = function () {
      prominent(img, { amount: 1,group: 30,format: 'hex' }).then(color => {
        console.log(color) // [241, 221, 63]
        setColor(color)
      })
      setImg(img)
    }
  }, [])
  const onOk = async () => {
    const data = await form.validateFields()
    const img = new window.Image();
    img.src = data.url||'https://img2.woyaogexing.com/2022/07/05/ffa480c830bf418a!360x640.jpg'
    img.onload = function () {
      setImg(img)
      prominent(img, { amount: 1,format: 'hex' }).then(color => {
        console.log(color) // [241, 221, 63]
        setColor(color)
      })
    }
    setText(data.text)
    setDate(data.date)
  }
  useEffect(()=>{
     onOk()
  },[])
  return (<div>
    <Form form={form} layout='inline' initialValues={{
      date: moment(),
      text:`相信自己拥有无限的潜力
只要你有一刻渴望成长
它就会支撑着你开花结果
      `,
      url:`https://images.pexels.com/photos/269583/pexels-photo-269583.jpeg?auto=compress&cs=tinysrgb&w=1600`
    }}>
      <Form.Item label="日期" name='date'>
        <DatePicker />
      </Form.Item>
      <Form.Item label="图片地址" name='url'>
        <Input />
      </Form.Item>
      <Form.Item label="文本" name='text'>
        <Input.TextArea />
      </Form.Item>
      <Form.Item name='date'>
        <Button onClick={onOk} type='primary'>生成</Button>
      </Form.Item>
    </Form>
    <Row>
      <Col style={{ marginRight: 20 }}>
        <Calendar1 color={color} text={text} date={date} img={img} />

      </Col>
      <Col style={{ marginRight: 20 }}>
        <Calendar2 text={text} date={date} img={img} />
      </Col>
      <Col style={{ marginRight: 20 }}>
        <Calendar3 text={text} date={date} img={img} />
      </Col>
    </Row>

  </div>)
}
export default App